<template>
  <view class="earnings-detail-page">
    <CustomNavBar :title="navTitle" />

    <!-- 标签页切换 -->
    <view class="tab-container">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item"
        :class="{ active: activeTabIndex === index }"
        @click="switchTab(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 日期选择 -->
    <view class="date-picker">
			<uni-datetime-picker v-model="range"  type="daterange" @maskClick="maskClick" />
    </view>

    <!-- 月份显示 -->
    <view class="month-display">
      <text>{{ currentMonth }}</text>
    </view>

    <!-- 收益列表 -->
    <view class="earnings-list">
      <view
        v-for="(item, index) in filteredEarnings"
        :key="index"
        class="earning-item"
      >
        <!-- 类型图标 -->
        <view class="type-icon" :class="item.type === 'direct' ? 'direct' : 'indirect'">
        </view>

        <!-- 详情信息 -->
        <view class="earning-details">
          <view class="earning-row">
            <text class="plate-number">车牌：{{ item.phone }}</text>
            <text class="amount">+{{ item.amount }}元</text>
          </view>
          <view class="earning-row">
            <text class="duration">时长：{{ item.duration }}</text>
            <text class="energy">电量：{{ item.energy }}度</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="filteredEarnings.length === 0" class="empty-state">
        <text>暂无数据</text>
      </view>
    </view>

  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import CustomNavBar from '@/components/CustomNavBar.vue';
import PileApi from '@/api/pile/pile.js';

// 导航标题
const navTitle = ref('服务费分成列表');
// 标签页
const tabs = ['全部', '直接', '间接'];
const activeTabIndex = ref(0);


// 日期选择
const range = ref([]);
const currentMonth = ref('');

// 收益数据
const earningsData = ref([
  // {
  //   id: 1,
  //   type: 'direct',
  //   plateNumber: '皖AA234',
  //   amount: '10.00',
  //   duration: '1.25h',
  //   energy: '15.5'
  // },
  // {
  //   id: 2,
  //   type: 'indirect',
  //   plateNumber: '- -',
  //   amount: '10.00',
  //   duration: '1.25h',
  //   energy: '15.5'
  // }
]);

// 根据标签筛选数据
const filteredEarnings = computed(() => {
  if (activeTabIndex.value === 0) {
    return earningsData.value;
  } else if (activeTabIndex.value === 1) {
    return earningsData.value.filter(item => item.type === 'direct');
  } else {
    return earningsData.value.filter(item => item.type === 'indirect');
  }
});

// 切换标签
const switchTab = (index) => {
  activeTabIndex.value = index;
};

// 日期选择器隐藏
const maskClick = () => {
  console.log('maskClick')

}

// 获取收益数据
const loadEarningsData = async () => {
  try {
    const data = await PileApi.getIncomeParticulars(0);
    if (data && data.records) {
      // 格式化数据
      earningsData.value = data.records.map(item => ({
        id: item.id,
        type: item.type === '0' ? 'direct' : 'indirect',
        plateNumber: item.plate || '- -',
        amount: item.fee,
        duration: item.duration,
        energy: item.energy
      }));
    }
  } catch (error) {
    console.error('获取收益数据失败:', error);
    uni.showToast({
      title: '获取数据失败',
      icon: 'none'
    });
  }
};

onMounted(() => {
  // 初始化页面数据
  loadEarningsData();
});
</script>

<style scoped>
.earnings-detail-page {
  min-height: 100vh;
  background-color: #ffffff;
}

/* 标签页样式 */
.tab-container {
  display: flex;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 30rpx 0;
  font-size: 30rpx;
  color: #000000;
  font-weight: 500;
  position: relative;
}

.tab-item.active {
  color: #000000;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150rpx;
  height: 4rpx;
  background-color: #00D4AA;
}

/* 日期选择样式 */
.date-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

/* 月份显示 */
.month-display {
  padding: 10rpx 30rpx;
  font-size: 28rpx;
  color: #000000;
  background-color: #f5f5f5;
}

/* 收益列表样式 */
.earnings-list {
  padding: 0 30rpx;
}

.earning-item {
  display: flex;
  padding: 30rpx 0;
  border-bottom: 1px solid #f0f0f0;
  background-color: #ffffff;
}

.type-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  color: #ffffff;
  font-size: 24rpx;
  font-weight: bold;
}

.type-icon.direct {
  background-image: url('https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/my-earnings/zhi.png');
  background-size: cover;
  width:75rpx;
  height:75rpx;

}

.type-icon.indirect {
  background-image: url('https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/my-earnings/shou.png');
  background-size: cover;
  width:75rpx;
  height:75rpx;
}

.earning-details {
  flex: 1;
}

.earning-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.plate-number {
  font-size: 30rpx;
  color: #000000;
}

.amount {
  font-size: 30rpx;
  color: #000000;
  font-weight: 500;
}

.duration, .energy {
  font-size: 24rpx;
  color: #999999;
}

/* 空状态 */
.empty-state {
  padding: 100rpx 0;
  text-align: center;
  color: #999999;
  font-size: 28rpx;
}
</style>
